<template>
  <div class="body">
    <div class="top">
      <div>
        <span class="title">统计年度</span>
        <div class="number">
          <span>2024</span>
          <img src="../assets/images/数据分析.svg" alt="" />
        </div>
      </div>
      <div>
        <span class="title">收入费用</span>
        <div class="number">
          <span>213024</span>
          <img src="../assets/images/收入.svg" style="width: 60px" alt="" />
        </div>
      </div>
      <div>
        <span class="title">支出费用</span>
        <div class="number">
          <span>213024</span>
          <img src="../assets/images/支出分析.svg" alt="" />
        </div>
      </div>
      <div>
        <span class="title">盈亏费用</span>
        <div class="number">
          <span>2024</span>
          <img src="../assets/images/金额.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="middle">
      <div>
        <middleEcharts />
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <div class="tab">
          <span>年度营收情况表</span>
          <el-radio-group v-model="tabPosition">
            <el-radio-button
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio-button>
            <!-- 在这里闭合标签 -->
          </el-radio-group>
        </div>
        <div class="footerEchart">
          <fotterLeft />
        </div>
      </div>
      <div class="right">
        <div class="footerRight">
          <span>收入</span>
          <footerRight />
        </div>
        <div class="footerRight">
          <span>支出</span>
          <footerRightZc />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import middleEcharts from "../views/echarts/middleEcharts.vue";
import fotterLeft from "../views/echarts/fotterLeft.vue";
import footerRight from "../views/echarts/footerRight.vue";
import footerRightZc from "../views/echarts/footerRightZc.vue";
export default {
  name: "index",
  components: {
    middleEcharts,
    fotterLeft,
    footerRight,
    footerRightZc,
  },
  data() {
    return {
      tabPosition: "1",
      options: [
        {
          value: "1",
          label: "工程部",
        },
        {
          value: "2",
          label: "信息部",
        },
        {
          value: "3",
          label: "市场部",
        },
        {
          value: "4",
          label: "驻地网",
        },
        {
          value: "5",
          label: "集客中心",
        },
        {
          value: "6",
          label: "家客中心",
        },
      ],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/searchBar.scss"; // 引入定制的 SCSS 文件路径
</style>
